<template>
	<div style="background-color: #171717 ;height: 150vmin; ">
		<div style="font-size: 30px; margin: 10px 20px;margin-bottom: 20px; color: #fff;">我的订单</div>
		<div class="big">
			<div style="width: 95%; height: 50px;margin: 10px auto; position: relative;">
				<el-select v-model="value" placeholder="全部" @change="changePage(currentPage)"
					style="position: absolute; right: 0;bottom: 0; height: 40px; width: 150px;padding: 0 5px; border-radius: 5px;background-color: #171717;">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="">
				<el-table :data="tableData" stripe="true" style="width: 95%; margin: 0 auto;background-color: #171717;"
					max-height="800px">
					<el-table-column prop="orderId" label="订单号" width="">
					</el-table-column>
					<el-table-column prop="orderType" label="类型" width="">
					</el-table-column>
					<el-table-column prop="orderAmount" label="金额" width="">
					</el-table-column>
					<el-table-column prop="createTime" label="订单创建时间" width="">
					</el-table-column>
					<el-table-column prop="paymentTime" label="订单支付时间" width="">
					</el-table-column>
					<el-table-column prop="orderState" label="状态" width="">
					</el-table-column>
					<el-table-column prop="robotId" label="机器ID" width="">
					</el-table-column>
					<el-table-column prop="robotName" label="机器名" width="">
					</el-table-column>
				</el-table>
			</div>
			<div style="margin: 20px 0 10px 0; display: flex; justify-content: center;">
				<el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
					:page-size="pageSize" @current-change="changePage">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import axios from 'axios';
	import {
		getOrderInfoByPage
	} from '../../api/work.js'
	export default {
		data() {
			return {
				options: [{
					value: '3',
					label: '全部'
				}, {
					value: '1',
					label: '已支付'
				}, {
					value: '0',
					label: '未支付'
				}, {
					value: '2',
					label: '已退款'
				}, ],
				tableData: [],
				data: {
					"userId": 1111111111,
					"page": 1,
					"limit": 10
				},
				pageNum: 0,
				pageSize: 0,
				total: 0,
				value: '',
				currentPage: 0
			};
		},
		mounted() {
			this.JudgingLogin()
			this.data.userId = localStorage.getItem('userid')
			this.created()
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			created() {
				let data = {
					userId: this.data.userId,
					page: 1,
					limit: 10,
					state: 3
				}
				// 分页获取订单数据
				getOrderInfoByPage(data).then(response => {
					// 请求成功，处理返回的数据
					this.tableData = response.data.list
					this.pageNum = response.data.pageNum
					this.pageSize = response.data.pageSize
					this.total = response.data.total
					for (var i = 0; i < this.tableData.length; i++) {
						if (this.tableData[i].orderState === 0) {
							this.tableData[i].orderState = '未支付'
						}
						if (this.tableData[i].orderState === 1) {
							this.tableData[i].orderState = '已支付'
						}
						if (this.tableData[i].orderState === 2) {
							this.tableData[i].orderState = '已退款'
						}
					}
				}).catch(error => {
					// 请求失败，处理错误信息  
					this.error = error;
				});

			},
			changePage(currentPage) {
				this.currentPage = currentPage
				let data = {
					userId: this.data.userId,
					page: currentPage,
					limit: 10,
					state: this.value
				}
				getOrderInfoByPage(data).then(response => {
						// 请求成功，处理返回的数据  
						this.tableData = response.data.list
						this.pageNum = response.data.pageNum
						this.pageSize = response.data.pageSize
						this.total = response.data.total
						for (var i = 0; i < this.tableData.length; i++) {
							if (this.tableData[i].orderState === 0) {
								this.tableData[i].orderState = '未支付'
							}
							if (this.tableData[i].orderState === 1) {
								this.tableData[i].orderState = '已支付'
							}
							if (this.tableData[i].orderState === 2) {
								this.tableData[i].orderState = '已退款'
							}
						}
					})
					.catch(error => {
						// 请求失败，处理错误信息  
						this.error = error;
					});
			},
			// 判断登录
			JudgingLogin() {
				console.log("登录信息")
				console.log(localStorage.getItem("LZY-TOKEN"))
				// 弹出提示框 ，请先登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.openLoginMessage()
				}
			},
			openLoginMessage() {
				this.$alert('还未登录，请先登录！', '登录提醒', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({
							path: '/login',
						})
					}
				});
			}

		},
	};
</script>

<style>
	.my_goods {
		width: 95%;
		height: 250px;
		margin-bottom: 30px;
		border-radius: 10px;
		margin-left: 20px;
		background-color: #171717;
	}

	.big {
		background-color: #171717;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.head {}

	.el-table__cell {
		background-color: #171717 !important;
	}

	.el-input__inner {
		background-color: #171717;
	}

	.el-table th.el-table__cell>.cell {
		color: #fff;
	}

	.el-table .cell {
		color: #fff;
	}
</style>